
import '../sass/Login.scss';

import {
    Button,
    Input,
    Form,
    Popup,
    Toast
} from 'react-vant';

import {
    useState
} from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

function Login() {

    let [visible, setVisible] = useState(true);
    let [loginForm] = Form.useForm();

    let navigate = useNavigate()

    //登录
    let login = values => {
        console.log(values)
        axios({
            method: 'post',
            url: '/login',
            data: {
                ...values
            }
        }).then(res => {
            console.log('登录 res ==> ', res);

            //重置所有文本域内容
            registerForm.resetFields();

            Toast({
                message: res.data.msg
            })

            if (res.data.code == 200) {
                //为了防止其他开发者研究登录token, 可以将token进行切片, 在混入一些干扰项
                // let tk = res.data.token.split(/\./);
                // console.log('tk ==> ', tk);

                localStorage.setItem('token', res.data.token);

                navigate('/menu');

            }
        })
    }

    //注册表单
    let [registerForm] = Form.useForm();

    //注册
    let register = values => {
        console.log(values)

        axios({
            method: 'post',
            url: '/register',
            data: {
                ...values
            }
        }).then(res => {
            console.log(res);
            registerForm.resetFields()
            Toast({
                message: res.data.msg
            })
            setVisible(false)
        })
    }

    return (
        <div className="login">
            <h2 className="title">用户登录</h2>
            <div>
                <Form
                    form={loginForm}
                    onFinish={login}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                登录
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        intro='输入11位手机号'
                        rules={[{ required: true, message: '手机号不能为空' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }]}
                        name='phone'
                        label='手机号'
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>
                    <Form.Item
                        intro='输入6-16位密码,支持数字字母下划线组合且以字母开头'
                        rules={[{ required: true, message: '密码不能为空' }, { pattern: /^[A-Za-z]\w{5,15}$/, message: '密码格式错误' }]}
                        name='password'
                        label='密码'
                    >
                        <Input placeholder='请输入密码' type="password" />
                    </Form.Item>
                </Form>

                <div className="btn-re">
                    <Button round nativeType='button' type='default' block onClick={() => { setVisible(true) }}>注册</Button>
                </div>
            </div>

            <Popup visible={visible} onClose={() => setVisible(false)} position="bottom" closeable>
                <div style={{ padding: '30px 20px' }}>
                    <Form
                        form={registerForm}
                        onFinish={register}
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button round nativeType='submit' type='primary' block>
                                    注册
                                </Button>
                            </div>
                        }
                    >
                        <Form.Item
                            intro='输入11位手机号'
                            rules={[{ required: true, message: '手机号不能为空' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }]}
                            name='phone'
                            label='手机号'
                        >
                            <Input placeholder='请输入手机号' />
                        </Form.Item>
                        <Form.Item
                            intro='输入6-16位密码,支持数字字母下划线组合且以字母开头'
                            rules={[{ required: true, message: '密码不能为空' }, { pattern: /^[A-Za-z]\w{5,15}$/, message: '密码格式错误' }]}
                            name='password'
                            label='密码'
                        >
                            <Input placeholder='请输入密码' type="password" />
                        </Form.Item>

                        <Form.Item
                            intro='输入1-10位昵称,支持中英文组合'
                            rules={[{ required: true, message: '昵称不能为空' }, { pattern: /^[A-Za-z\u4e00-\u9fa5]{1,10}$/, message: '昵称格式错误' }]}
                            name='nickName'
                            label='昵称'
                        >
                            <Input placeholder='请输入昵称' />
                        </Form.Item>
                    </Form>
                </div>
            </Popup>
        </div>
    );
}

export default Login;